<!--********************************************************************
* Copyright© 2000 - 2022 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title data-i18n="resources.title_mapQueryByBounds"></title>
  </head>
  <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
    <div id="map" style="margin: 0 auto; width: 100%; height: 100%"></div>
    <script type="text/javascript" include="L7,maplibre-gl-enhance" src="../../dist/maplibregl/include-maplibregl.js"></script>
    <script type="text/javascript">
      var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
      var url = host + '/iserver/services/map-world/rest/maps/World';
      var attribution =
        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
      var scene;
      var map = new maplibregl.Map({
        container: 'map',
        style: 'https://api.maptiler.com/maps/basic/style.json?key=49D4vXt4KBt37nKTQbX5',
        center: [115.5268, 34.3628],
        maxZoom: 18,
        zoom: 2,
        pitch: 45,
        bearing: 0,
        
      });

      map.on('load', async () => {
        // 按原生antv l7 layer构建图层， 获取iclient-maplibregl的L7Layer实例，
        const layer = await getDotPointLayer();
        // 通过maplibregl map.addLayer()上图
        map.addLayer(layer);
      });

      async function getDotPointLayer() {
        const dot = await fetch(
          'https://gw.alipayobjects.com/os/basement_prod/4472780b-fea1-4fc2-9e4b-3ca716933dc7.json'
        ).then((d) => d.text());

        // new L7Layer()， 参数：（type: antv l7 layer的图层类型  options: antv l7 layer的图层类型）
        const layer = new maplibregl.supermap.L7Layer({ type: 'PointLayer', options: {} });
        // getL7Layer返回原生antv l7 layer的实例
        const l7Layer = layer.getL7Layer();
        // 调用原生antv l7 layer的方法，构建图层
        l7Layer
          .source(eval(dot), {
            parser: {
              type: 'json',
              x: 'lng',
              y: 'lat'
            }
          })
          .shape('circle')
          .color('rgb(22,119,255)')
          .size(20)
          .style({
            opacity: 1.0
          });
        // 返回iclient-maplibregl的L7Layer实例， 通过map.addLayer()上图
        return layer;
      }

      function getLayer(type = 'PointLayer', options = {}) {
        return new maplibregl.supermap.L7Layer({ type, options });
      }
    </script>
  </body>
</html>
